<template>
  <div class="page">
    <div class="schedule" v-if="dataInfo">
      <div class="schedule-item schedule-active">
        <div class="wrap">
          <!--        <img v-if="dataInfo" src="@/assets/images/user/package/check.png" alt="">-->
          <img src="@/assets/images/user/package/check-active.png" alt="" />
        </div>
        <span class="text">{{ $t("user.checkGoods") }}</span>
      </div>
      <div class="schedule-item schedule-active">
        <div class="wrap">
          <div class="line"></div>
          <!--        <img src="@/assets/images/user/package/submit.png" alt="">-->
          <img src="@/assets/images/user/package/submit-active.png" alt="" />
        </div>
        <span class="text">{{ $t("user.submissionWaybill") }}</span>
      </div>
      <div class="schedule-item" :class="dataInfo.status == 'WAIT_CONFIRM' || dataInfo.status == 'DELIVERED' || dataInfo.status == 'CONFIRMING' || dataInfo.status == 'WAIT_SHIPPING' || dataInfo.status == 'COMPLETED'
        ? 'schedule-active'
        : ''
        ">
        <div class="wrap">
          <div class="line"></div>
          <img
            v-if="dataInfo.status == 'WAIT_CONFIRM' || dataInfo.status == 'DELIVERED' || dataInfo.status == 'CONFIRMING' || dataInfo.status == 'WAIT_SHIPPING' || dataInfo.status == 'COMPLETED'"
            src="@/assets/images/user/package/pay-active.png" alt="" />
          <img v-else src="@/assets/images/user/package/pay.png" alt="" />
        </div>
        <span class="text">{{ $t("submitParcel.confirmationWaybill") }}</span>
      </div>
      <div class="schedule-item"
        :class="dataInfo.status == 'COMPLETED' || dataInfo.status == 'DELIVERED' ? 'schedule-active' : ''">
        <div class="wrap">
          <div class="line"></div>
          <img v-if="dataInfo.status == 'COMPLETED' || dataInfo.status == 'DELIVERED'"
            src="@/assets/images/user/package/transport-active.png" alt="" />
          <img v-else src="@/assets/images/user/package/transport.png" alt="" />
        </div>
        <span class="text">{{ $t("user.sendParcel") }}</span>
      </div>
      <div class="schedule-item" :class="dataInfo.status == 'COMPLETED' ? 'schedule-active' : ''">
        <div class="wrap">
          <div class="line"></div>
          <img v-if="dataInfo.status == 'COMPLETED'" src="@/assets/images/user/package/complete-active.png" alt="" />
          <img v-else src="@/assets/images/user/package/complete.png" alt="" />
        </div>
        <span class="text">{{ $t("user.confirmReceiptGoods") }}</span>
      </div>
    </div>

    <!--待支付时包裹状态-->
    <div class="packages-info" v-if="dataInfo.status == 'WAIT_PAYMENT'">
      <div class="info">
        <div class="info-item">
          <span class="label">{{ $t("user.waybillStatus") }}：</span>
          <span class="value">
            {{ dataInfo.statusName }}
          </span>
        </div>
        <div class="info-item">
          <span class="label">{{ $t("user.waybillNumber") }}：</span>
          <span class="value">{{ expressOrderNo }}</span>
        </div>
        <div class="info-item">
          <span class="label">{{ $t("user.submissionTime") }}：</span>
          <span class="value">{{ dataInfo.createTime }}</span>
        </div>
      </div>
      <div class="content">
        <span class="text">{{ $t("user.internationalFreight") }}</span>
        <span class="pay-title">{{ $t("user.continueSubmit") }}</span>
        <div class="btn-wrap">
          <router-link v-if="dataInfo.status == 'WAIT_CONFIRM'" class="btn"
            :to="`/confirm/package?id=${dataInfo.expressOrderNo}`">
            <Button class="btn" type-size="oversized" type="primary">
              {{ $t("user.pay") }}
            </Button>
          </router-link>
          <router-link v-if="dataInfo.status == 'WAIT_PAYMENT'" class="btn" :to="`/pay?id=${dataInfo.expressOrderNo}`">
            <Button class="btn" type-size="oversized" type="primary">
              {{ $t("user.pay") }}
            </Button>
          </router-link>
          <Button class="btn" @click="onCancelPop" :disabled="cancelLoading"
            v-if="dataInfo.status == 'WAIT_PAYMENT' || dataInfo.status == 'INIT'" type-size="oversized">
            {{ $t("user.cancellationWaybill") }}
          </Button>
        </div>
      </div>
    </div>

    <!--收货地址-->
    <div class="shipping-address" v-if="orderAddress">
      <div class="shipping-title">
        <span class="label">{{ $t("user.deliveryAddress") }}</span>
        <!--      <img class="icon" src="@/assets/images/user/show-d.png" alt="">-->
        <!--      <img class="icon" src="@/assets/images/user/hide-d.png" alt="">-->
        <div class="tag">
          <span class="iconfont icon-anquanbaozhang"></span>
          {{ $t("user.ensureInformationSecurity") }}
        </div>
      </div>
      <div class="current-address">
        <img class="bg-border" src="@/assets/images/parcel/bg-border.png" alt="" />
        <div class="address-info">
          <div class="left">
            <!--接收人-->
            <div class="receiver">
              <span class="name">{{ orderAddress.name }} {{ orderAddress.surname }}</span>
              <span class="contact">+{{ orderAddress.regionCode }} {{ orderAddress.mobile }}</span>
              <span class="contact"> {{ orderAddress.postalCode }}</span>
            </div>
            <!--地址-->
            <div class="addr">
              <span>{{ orderAddress.countryText }}</span>
              <span>{{ orderAddress.provinceText }}</span>
              <span>{{ orderAddress.cityText }} {{ orderAddress.areaText }} </span>
              <span>{{ orderAddress.addressDetail }} </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品列表 -->
    <div v-for="(item, index) in dataInfo.parcelInfoList">
      <details-list :dataInfo="dataInfo" :parcelInfo="item" :index="index" />
    </div>

    <!-- 补差价按钮 -->
    <div class="total" v-if="dataInfo.status == 'WAIT_CONFIRM' || dataInfo.status == 'CONFIRMING'">
      <div class="fee">
        <div>{{ $t("submitParcel.ActualShippingCost") }}：{{ dataInfo.currencySymbol }} {{ dataInfo.finalTotalFee ?
          dataInfo.finalTotalFee : "--" }}</div>
        <div>{{ $t("submitParcel.prepaidFreight") }}：{{ dataInfo.currencySymbol }} {{ dataInfo.originPaidFee ?
          dataInfo.originPaidFee : "--" }}</div>
        <!-- <div>{{ $t('submitParcel.PriceDifference') }}：{{ dataInfo.currencySymbol }} {{ dataInfo.diffFee ? dataInfo.diffFee : '--' }}</div> -->
      </div>
      <div class="flex">
        <div>{{ dataInfo.confirmStrategy == "PAY_REST" ? $t("user.paymentRequired") : dataInfo.confirmStrategy == "NONE"
          ? $t("user.noNeed") : $t("user.return") }}：
          <span>{{ dataInfo.currencySymbol }} {{ dataInfo.diffFee || dataInfo.diffFee == 0 ? Math.abs(dataInfo.diffFee)
            : "--" }}</span>
        </div>
        <Button class="btn" @click="onOrderPayment" :disabled="loading" type="primary">{{ $t("pay.confirmPayment")
          }}</Button>
      </div>
    </div>
    <div class="total"
      v-if="dataInfo.status == 'WAIT_SHIPPING' || dataInfo.status == 'DELIVERED' || dataInfo.status == 'CANCELED' || dataInfo.status == 'COMPLETED'">
      <div class="flex">
        <div>
          {{ $t("user.finalPayment") }}：<span>{{ dataInfo.currencySymbol }} {{ dataInfo.finalTotalFee ?
            dataInfo.finalTotalFee : "--" }}</span>
        </div>
      </div>
    </div>

    <!--取消订单弹窗-->
    <Modal v-model="cancelPop" class-name="vertical-center-modal" :title="$t('user.cancelOrder')"
      :mask-closable="false">
      <div class="pop-content-wrap">
        <p class="pop-title">{{ $t("user.cancellationCannotRestored") }}</p>
        <Select v-model="cancelType">
          <Option v-for="item in argumentList" :value="item.value" :key="item.value">{{ $t(item.label) }}</Option>
        </Select>
        <div class="pop-content" v-if="cancelType == 5" :style="{ marginTop: '16px' }">
          <Input v-model="cancelOrderRmk" maxlength="200" show-word-limit type="textarea"
            :placeholder="$t('user.pleaseFillReason')" />
        </div>
      </div>
      <div slot="footer">
        <Button @click="onHidePop">{{ $t("public.cancel") }}</Button>
        <Button @click="onCancelOrder" :loading="cancelLoading" :disabled="cancelLoading" type="primary">{{
          $t("public.confirm") }}</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { expressOrderCancel, detailList, submitConfirming, confirmingDetails } from "@/api/expressOrder";
import detailsList from "./detailsList";
import { mapState } from "vuex";

export default {
  components: { detailsList },
  data() {
    return {
      dataInfo: "", // 商品详情
      orderAddress: "",
      expressOrderNo: "", // 运单编号
      appName: process.env.VUE_APP_NAME,
      cancelLoading: false,
      loading: false,
      cancelType: "", // 取消的理由
      cancelPop: false, // 取消弹窗
      cancelOrderRmk: "", // 取消订单理由
      argumentList: [
        {
          value: 1,
          label: "user.buyIt",
        },
        {
          value: 2,
          label: "user.incorrectInformationFilling",
        },
        {
          value: 3,
          label: "user.sellersOutStock",
        },

        {
          value: 4,
          label: "user.unablePay",
        },
        {
          value: 5,
          label: "user.otherReasons",
        },
      ],
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      userCurrency: (state) => state.user.userCurrency,
    }),
  },
  created() {
    this.expressOrderNo = this.$route.query.id;
    this.getCargoList();
  },
  methods: {
    onCancelPop() {
      // 显示取消弹窗
      this.cancelPop = true;
    },
    onCancelOrder() {
      // 取消运单
      if (this.cancelType != 5) {
        for (let i = 0; i < this.argumentList.length; i++) {
          if (this.argumentList[i].value == this.cancelType) {
            this.cancelOrderRmk = this.$t(this.argumentList[i].label);
          }
        }
      }

      if (this.cancelOrderRmk == "") {
        this.$Message.error(this.$t("user.pleaseFillReason"));
        this.$Modal.remove();
        return false;
      }
      this.cancelLoading = true;
      expressOrderCancel({
        cancelReason: this.cancelOrderRmk, // 取消原因
        expressOrderNo: this.expressOrderNo, // 运单号
      })
        .then((res) => {
          this.cancelLoading = false;
          this.cancelOrderRmk = "";
          this.cancelType = "";
          this.cancelPop = false;
          this.getCargoList();
        })
        .catch(() => {
          this.cancelLoading = false;
        });
    },
    onHidePop() {
      // 关闭取消弹窗
      this.cancelOrderRmk = "";
      this.cancelType = "";
      this.cancelPop = false;
    },
    onOrderPayment() {
      this.loading = true;
      submitConfirming({ expressOrderNo: this.expressOrderNo, currencyCode: this.userCurrency.code })
        .then((res) => {
          if (res.result.confirmStrategy == "PAY_REST") {
            this.$router.push("/pay?id=" + res.result.expressOrderNo + "&isWaybill=confirmWaybill" + "&markText=mend");
          } else {
            this.$Message.success(this.$t("user.confirmedSuccessful"));
            setTimeout(() => {
              this.$router.push("/user/shipment");
            }, 3000);
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 确认确定详情详细
    async getCargoList() {
      await detailList(this.expressOrderNo, this.userCurrency.code).then((res) => {
        this.dataInfo = res.result
        this.dataInfo.parcelInfoList = this.dataInfo.parcelInfoList.map((item) => {
          item.parcelImg = item.parcelImg ? item.parcelImg.split(",") : [];
          return item;
        });
        if (res.result.orderAddress) {
          this.orderAddress = res.result.orderAddress;
          this.orderAddress.name = res.result.orderAddress.recipientName.split(",")[0];
          this.orderAddress.surname = res.result.orderAddress.recipientName.split(",")[1];
        }
      });
      if (this.dataInfo.status == "WAIT_CONFIRM" || this.dataInfo.status == "CONFIRMING") {
        await confirmingDetails(this.expressOrderNo, this.userCurrency.code).then((value) => {
          this.$set(this.dataInfo, "originPaidFee", value.result.originPaidFee);
          this.$set(this.dataInfo, "finalTotalFee", value.result.finalTotalFee);
          this.$set(this.dataInfo, "diffFee", value.result.diffFee);
          this.$set(this.dataInfo, "confirmStrategy", value.result.confirmStrategy);
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.page {
  .schedule {
    display: flex;

    .schedule-item {
      margin-left: 160px;
      color: #999999;
      font-size: 14px;
      font-weight: 500;

      &:first-child {
        margin-left: 0;
      }

      .wrap {
        position: relative;

        img {
          display: block;
          width: 48px;
          margin: 0 auto;
        }

        .line {
          position: absolute;
          bottom: 12px;
          left: -142px;
          width: 124px;
          border: 1px dashed #999999;
        }
      }

      .text {
        white-space: nowrap;
      }
    }

    .schedule-active {
      color: @primary-color;

      .wrap {
        .line {
          border: 1px dashed @primary-color;
        }
      }
    }
  }

  .packages-info {
    margin-top: 28px;
    background: #fff6f0;
    border-radius: 4px;
    overflow: hidden;
    padding-bottom: 14px;

    .info {
      display: flex;
      background: @primary-color;
      padding: 20px 24px;

      &-item {
        color: #ffffff;
        font-size: 14px;
        margin-left: 140px;
        display: flex;
        align-items: center;

        &:first-child {
          margin-left: 0;
        }

        .label {}

        .value {}
      }
    }

    .content {
      padding: 24px;

      .text {
        display: block;
        color: @t-title-color;
        font-size: 14px;
      }

      .date {
        display: block;
        margin-top: 8px;
        color: @primary-color;
        font-size: 18px;
        font-weight: 500;
      }

      .pay-title {
        display: block;
        margin-top: 32px;
        margin-bottom: 14px;
        color: @t-text-color;
        font-size: 14px;
      }

      .btn-wrap {
        display: flex;

        .btn {
          width: 140px;
          margin-right: 32px;
        }
      }
    }
  }

  .shipping-address {
    margin-top: 28px;

    .shipping-title {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 500;

      .label {
        color: @t-title-color;
        font-size: 14px;
        font-weight: 500;
      }

      .icon {
        display: block;
        width: 16px;
        height: 16px;
        margin-left: 4px;
        margin-right: 8px;
        cursor: pointer;
      }

      .tag {
        margin-left: 6px;
        padding: 2px 10px;
        background: #e8fff3;
        border-radius: 90px;
        font-size: 12px;
        color: #51b481;

        .iconfont {
          font-size: 14px;
          color: #51b481;
          margin-right: 3px;
        }
      }
    }

    .current-address {
      position: relative;
      margin-top: 16px;

      .bg-border {
        display: block;
        width: 100%;
      }

      .address-info {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        padding: 18px 40px;
        display: flex;
        justify-content: space-between;

        .left {
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          height: 100%;

          .receiver {
            color: @t-title-color;

            .name {
              font-size: 24px;
              font-weight: 700;
            }

            .contact {
              margin-left: 24px;
              font-size: 14px;
              font-weight: 500;
            }
          }

          .addr {
            color: @t-text-color;

            span {
              display: block;
              margin-top: 6px;
            }
          }
        }

        .right {
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          height: 100%;

          .select-addr {
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 400;

            .default-addr {
              padding: 2px 12px;
              color: @primary-color;
              background: #fff6f0;
              border-radius: 2px;
            }

            .addr-value {
              padding: 2px 12px;
              margin-left: 8px;
              color: @success-color;
              background: #e6f3ec;
              border-radius: 2px;
            }
          }

          .edit-wrap {
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .edit {
              display: flex;
              align-items: center;
              cursor: pointer;

              img {
                display: block;
                width: 16px;
                flex: 0 0 16px;
                height: 16px;
              }

              span {
                margin-left: 4px;
                color: @primary-color;
                font-size: 14px;
                font-weight: 500;
              }
            }
          }
        }
      }
    }
  }

  .logistics-info {
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #dcdee2;
    width: 100%;
    padding: 0 10px;
    margin: 20px 0;

    >.title {
      height: 45px;
      line-height: 45px;
      padding: 0 22px;
      font-weight: 500;
      font-size: 16px;
      color: #232323;
    }

    .main {
      border: 1px solid #dcdee2;
      padding: 0 15px 0;

      .packageInfo {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: center;
        font-size: 14px;
        color: #232323;
        height: 62px;
        line-height: 62px;

        >div {
          flex: auto;

          &:last-child {
            text-align: right;
          }

          >span {
            color: #e76202;
          }

          .pointer {
            cursor: pointer;
          }
        }
      }

      .table {
        margin: 0 -15px;
        border-bottom: 1px solid #dcdee2;

        &:last-child {
          border: 0;
        }

        .header {
          padding: 0 27px;
          height: 40px;
          line-height: 40px;
          background: #f8f8f9;
          font-weight: 500;
          font-size: 14px;
          color: #232323;
        }

        .table-body {
          padding: 20px 15px;

          .commodity-info {
            display: flex;

            .image {
              display: block;
              width: 100px;
              height: 100px;
              border-radius: 4px 4px 4px 4px;
            }

            .commodity-content {
              font-size: 14px;
              color: #232323;
              padding: 0 20px 0 10px;
              margin-bottom: 6px;

              .intro {
                font-size: 12px;
                color: #666666;
              }
            }
          }
        }
      }
    }

    .freight-detail {
      display: flex;
      align-items: stretch;
      justify-content: space-between;

      .freight {
        flex: 1;
        border: 1px solid #dcdee2;
        padding: 24px;
        font-size: 16px;
        color: #232323;
        margin-right: 11px;

        .item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 15px;

          &:last-child {
            margin: 0;
          }
        }
      }
    }
  }

  .total {
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 0px 0px 0px 0px;
    margin-top: 24px;
    color: @t-title-color;
    text-align: right;
    font-weight: 700;
    font-size: 24px;
    padding: 15px 30px;

    div {
      font-size: 16px;
      margin-right: 20px;
      font-size: 14px;
      color: #666666;

      span {
        font-weight: 700;
        font-size: 30px;
        color: #e76202;
      }
    }

    .fee {
      margin-right: 0;
      margin-bottom: 5px;

      >div:not(:last-child) {
        margin-bottom: 5px;
      }
    }

    .flex {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}

.physical-pop {
  .time {
    color: @t-text-color;
    font-size: 12px;
  }

  .content {
    color: @t-title-color;
    font-size: 12px;
    font-weight: 500;
  }
}
</style>
